


[can-click] {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &[disabled]{
    cursor:not-allowed;
  }
  &:not([disabled]){
    &:after {
      content: '';
      background: #000;
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      pointer-events: none;
      transition: all 0.2s cubic-bezier(0.93, 0.03, 1, 1);
      border-radius: inherit;
      border-radius: 2px;
    }
  }

  &:hover {
    &:after {
      opacity: 0.12;
      transition: none;
    }
  }
}

[can-click-trigger] {
  cursor: pointer;
  
  .box-trigger{
    position: relative;
    &:after {
      content: '';
      background: #000;
      position: absolute;
      opacity: 0;
      inset:-3.3px;
      pointer-events: none;
      transition: all 0.2s cubic-bezier(0.93, 0.03, 1, 1);
      border-radius: inherit;
      border-radius: 2px;
    }
  }
  &.active,&:hover {
    .box-trigger{
      &:after {
        opacity: 0.12;
        transition: none;
      }
    }
  }
}

$i: 1;
@while $i<13 {
  .flex-#{$i} {
    flex: $i;
    min-width: 1px;
    min-height: 1px;
  }
  $i: $i + 1;
}

/* 自动显示滚动条 */
.scrollbar-auto {
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 100px;
  }
}

.line1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line2 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line3 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
